<template>
	<view class="user-set">
		<!-- <navigator url="/pages/users/user_info/index"> -->
			<view class="user-info flex-between">
				<view class="picTxt ">
					<u-avatar
						src="https://v4.crmeb.net/uploads/store/comment/20230819/8fe37a89e638c20655b3c5459d0f54dd.jpg"
						size="128rpx"></u-avatar>
					<view class="text">
						<view class="name">{{user.phone}}</view>
						<view class="info">
							ID: {{user.id}}
						</view>
					</view>
				</view>
				<!-- <view class="self-center">
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view> -->
			</view>
		<!-- </navigator> -->



		<view class="list">
			<navigator class="item " url="/pages/users/user_address_list/index">
				<view class="flex-between">
					<view>地址管理</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</navigator>
			<navigator class="item ">
				<view class="flex-between">
					<view>发票管理</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</navigator>
		</view>

		<view class="list">
			<navigator class="item ">
				<view class="flex-between">
					<view>用户协议</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</navigator>
			<navigator class="item ">
				<view class="flex-between">
					<view>隐私协议</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</navigator>
		</view>
		<view class="w94 " style="margin-top: 60rpx;">
			<u-button shape="circle" type="primary" @click="$u.throttle(logout, 500)">退出登录</u-button>
		</view>
		<!-- <view class="logout flex-center w94">退出登陆</view> -->
	</view>
</template>
<script setup>
	import {
		storeToRefs
	} from 'pinia';
	import {
		useUserStore
	} from '@/store/index.js';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	
	const {
		userInfo
	} = storeToRefs(useUserStore());
	const userStore = useUserStore()
	let user = reactive(uni.getStorageSync('userInfo'))
	onLoad(()=>{
		// user = uni.getStorageSync('userInfo')
		console.log("user 信息",user);
	})
	// 退出登录
	const logout = () => {
		uni.showToast({
			title: '退出中',
			icon: 'loading',
		})
	  uni.removeStorageSync('accessToken');
	  uni.removeStorageSync('refreshToken');
	  userStore.$patch((state) => {
	  	state.userInfo.name = ''
	  	state.userInfo.phone = ''
	  	state.token = ''
	  	state.refresh_token = ''
		console.log("退出登录state", state.userInfo,state);
	  })
	  uni.reLaunch({ url: '/pages/users/login/index' });
	};
</script>
<style scoped lang="scss">
	.user-set {
		margin-top: 20rpx;

		.user-info {
			background-color: #fff;
			padding: 17px 8px 17px 17px;
			margin: 0 20rpx;
			font-size: 12px;
			border-radius: 12px;

			.picTxt {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.text {
					margin-left: 16px;
					font-weight: 400;

					.name {
						font-size: 17px;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.info {
						font-size: 12px;
						color: #999;
						margin-top: 2px;
					}
				}

			}
		}

		.list {
			background-color: #fff;
			margin: 0 20rpx;
			margin-top: 20rpx;
			border-radius: 12px;

			.item {
				padding: 34rpx 20rpx 24rpx 24rpx;
				font-size: 16px;
				color: #333;
			}
		}

		.logout {
			font-size: 16px;
			text-align: center;
			color: #333;
			height: 52px;
			border-radius: 120px;
			margin: 16px auto 0 auto;
			background-color: #fff;
		}
	}
</style>